<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 | 美团网</title>
  <link rel="icon" href="assets/imgs/favicon.ico" sizes="16x16 32x32">
  <link rel="stylesheet" href="./assets/css/normalize.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2766798_wyklb4ym1mp.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2791358_ts1lcocnu.css">
  <link rel="stylesheet" href="./assets/css/index.css">
</head>

<body>
  <!-- header -->
  <header>
    <div class="bar">
      <div class="bar-content">
        <!-- city -->
        <div class="city">
          <i class="iconfont icon-zuobiao"></i>
          <span class="choose-city">南京</span>

          <!-- 请手动选择 -->
          <div class="area">
            <div class="change-city">切换城市<b></b></div>
            <div class="box">
              <ul class="tab">
                <li class="cur">请选择</li>
                <li class="">请选择</li>
                <li class="">请选择</li>
              </ul>
              <div class="tab-content">
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京1</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京2</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京3</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
              </div>
              <div class="tab-content" style="display: none;">
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京4</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京5</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京6</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
              </div>
              <div class="tab-content" style="display: none;">
                <div class="city" area-id="1"><a href="javascript:;">北京7</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京8</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京9</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
                <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
              </div>
            </div>
          </div>
          <!-- 请手动选择 -->
        </div>
        <!-- city -->

        <!-- login -->
        <div class="login">
          <!-- 已登录 -->
          <a href="./member.html">神龙教主假数据</a>
          <a href="./logout.html">退出</a>
          <!-- 已登录 -->

          <!-- 未登录 -->
          <a href="./login.html">你好，请登录</a>
          <a href="./registry.html">免费注册</a>
          <a href="">我的订单</a>
          <!-- 未登录 -->
        </div>
        <!-- login -->
      </div>
    </div>
    <div class="content">
      <img src="./assets/imgs/logo.png" alt="" class="logo">
      <div class="search">
        <input class="header-search-input" type="text" placeholder="搜索商家或地点">
        <button class="header-search-btn"><span
            class="header-icon icon-search-new iconfont icon-search"></span></button>
      </div>
      <div></div>
    </div>
  </header>
  <!-- header -->

  <!-- banner -->
  <section class="banner">
    <div class="left-banner">
      <div class="cate-title">全部分类</div>
      <div class="cate-content category-nav-container">
        <!-- 一级 -->
        <div class="category-nav-content-wrapper cat1">
          <ul>
            <!-- <li class="nav-li">
              <i class="iconfontNew hc-icon-foodNew"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="" class="link nav-text" target="_blank">美食</a>
                </span></span>
              <i class="nav-right-arrow"></i>
            </li>
            <li class="nav-li">
              <i class="iconfontNew hc-icon-foodNew"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="" class="link nav-text" target="_blank">外卖</a>
                  <span class="nav-promotion">HOT</span>
                  <i class="nav-right-arrow"></i>
            </li> -->
            <li class="nav-li">
              <i class="iconfont icon-canju"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">美食</a>
                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-meituan"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">外卖</a>
                  <span class="nav-promotion">HOT</span>
                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-jiudian"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">酒店</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-jiudian"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">民宿</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-dianying-"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">猫眼电影</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-feiji"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">机票 / 火车票</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-maikefeng"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">休闲娱乐 / KTV</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-icon"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">生活服务</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-chuitoufa"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">丽人 / 美发 / 医学美容</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-qinzi2"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">结婚 / 婚纱摄影 / 婚宴</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-gangling"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">亲子 / 儿童乐园 / 幼教</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-pinleitubiao_jiazhuangjiancai"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">运动健身 / 健身中心</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-xuexi"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">家装 / 建材 / 家居</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-zhuanshi"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">学习培训 / 音乐培训</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-tubiao_-"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="javascript:;" class="link nav-text">医疗健康 / 宠物 / 爱车</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
            <li class="nav-li">
              <i class="iconfont icon-jiubajiulang"></i>
              <span class="nav-text-wrapper"><span>
                  <a href="https://www.baidu.com/" class="link nav-text">酒吧 / 密室逃脱</a>

                  <i class="nav-right-arrow"></i>
                </span></span>
            </li>
          </ul>
        </div>
        <!-- 一级 -->

        <!-- 子导航内容 -->
        <div class="category-nav-detail-wrapper cat2">
          <!-- 二级 box 每个一级仅一个二级盒子  -->
          <div class="category-nav-detail">
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
            <div class="detail-area">
              <div class="detail-title-wrapper clearfix">
                <h2>
                  <a href="javascript:;" class="link detail-title" target="_blank">美食</a>
                </h2>
                <a href="" class="link detail-more" target="_blank">更多<i class="detail-right-arrow"></i></a>
              </div>

              <!-- 三级 -->
              <div class="detail-content">
                <a href="javascript:;" class="link detail-text" target="_blank">代金券</a>
                <a href="javascript:;" class="link detail-text" target="_blank">代金券</a>
                <a href="javascript:;" class="link detail-text" target="_blank">代金券</a>
              </div>
              <!-- 三级 -->
            </div>
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
          </div>
          <!-- 二级 box 每个一级仅一个二级盒子 -->


          <!-- 二级 box 每个一级仅一个二级盒子  -->
          <div class="category-nav-detail">
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
            <div class="detail-area">
              <div class="detail-title-wrapper clearfix">
                <h2>
                  <a href="javascript:;" class="link detail-title" target="_blank">美食2</a>
                </h2>
                <a href="" class="link detail-more" target="_blank">更多<i class="detail-right-arrow"></i></a>
              </div>

              <!-- 三级 -->
              <div class="detail-content">
                <a href="javascript:;" class="link detail-text" target="_blank">代金券2</a>
                <a href="javascript:;" class="link detail-text" target="_blank">代金券2</a>
                <a href="javascript:;" class="link detail-text" target="_blank">代金券2</a>
              </div>
              <!-- 三级 -->
            </div>
            <!-- 二级 content 每个二级盒子里面有n个二级内容 -->
          </div>
          <!-- 二级 box 每个一级仅一个二级盒子 -->
        </div>
        <!-- 子导航内容 -->
      </div>
    </div>
    <div class="right-banner">
      <div class="home-header-links">
        <a href="./waimai.html">美团外卖</a>
        <a href="">千锋云直播</a>
        <a href="">千锋云音乐</a>
        <a href="">千锋云大屏数据可视化平台</a>
      </div>
      <div class="banner-row">
        <div class="swiper">
          <img src="./assets/imgs/lbt.jpeg" alt="">
        </div>
        <div class="life">
          <img src="./assets/imgs/life.jpeg" alt="">
        </div>
        <!-- 用户信息 -->
        <div class="userinfo">
          <!-- 未登录 -->
          <div class="default">
            <div class="head-img-row">
              <img src="./assets/imgs/avatar.jpeg" alt="">
            </div>
            <p class="user-name">Hi！你好</p><a class="btn-login" href="./registry.html">注册</a>
            <a class="btn-login" href="./login.html">立即登录</a>
          </div>
          <!-- 未登录 -->

          <!-- 已登录 -->
          <div class="default" style="display:none">
            <div class="setting">
              <a href="" target="_blank">
                <div class="icon">
                  <i class="iconfont icon-setting_iconx"></i>
                </div>
              </a>
            </div>
            <div class="head-img-row">
              <a href="" target="_blank">
                <img src="./assets/imgs/avatar.jpeg" alt="">
              </a>
            </div>
            <div class="nickname-row">
              <a href="./member.html" target="_blank">
                <p class="user-name">你好，神龙教主</p>
              </a>
              <a href="./member.html" target="_blank">
                <i class=" iconfont iconfont_level icon-lable_level_undefined"></i>
              </a>
            </div>
            <div class="fn-row clearfix">
              <div class="fn-item">
                <a href="./member-orders.html" target="_blank">
                  <div class="icon">
                    <i class="iconfont icon-order_iconx iconfont icon-tubiaolunkuo-"></i>
                  </div>
                  <p class="fn-name">我的订单</p>
                </a>
              </div>
              <div class="fn-item">
                <a href="./member-shoucang.html" target="_blank">
                  <div class="icon">
                    <i class="iconfont icon-collection_iconx icon-shoucang"></i>
                  </div>
                  <p class="fn-name">我的收藏</p>
                </a>
              </div>
            </div>
            <div class="fn-row clearfix">
              <div class="fn-item">
                <a href="./member-money.html" target="_blank">
                  <div class="icon"><i class="iconfont icon-money_iconx icon-yue"></i></div>
                  <p class="fn-name">余额</p>
                </a>
              </div>
              <div class="fn-item">
                <a href="./member.html" target="_blank">
                  <div class="icon"><i class="iconfont icon-more_iconx icon-gengduo"></i></div>
                  <p class="fn-name">更多</p>
                </a>
              </div>
            </div>
          </div>
          <!-- 已登录 -->
        </div>
        <!-- 用户信息 -->
      </div>
      <div class="banner-row">
        <div class="img-box"><img src="./assets/imgs/banner1.png" alt="" /></div>
        <div class="img-box"><img src="./assets/imgs/banner2.jpeg" alt="" /></div>
        <div class="img-box"><img src="./assets/imgs/banner3.jpeg" alt="" /></div>
        <div class="item download-app">
          <div class="qrcode-box"><img src="./assets/imgs/ewm2.png" alt="下载APP"></div>
          <p class="app-name">美团APP手机版</p>
          <p class="sl"><span class="red">1元起</span><span class="gary">吃喝玩乐</span></p>
        </div>
      </div>
    </div>
  </section>
  <!-- banner -->

  <script src="./assets/js/jquery-1.8.3.min.js"></script>
  <script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
  <script src="./assets/js/location.js"></script>
  <script src="./assets/js/chooseLocation.js"></script>
  <script src="./assets/js/cate.js"></script>
</body>

</html>